<template>
  <config-table
    ref="table"
    :column="column"
    :request="request"
    :before-request="beforeRequest"
    :is-virtual-scroll-bar="true"
    @afterRequest="afterRequest"
  />
</template>

<script>
import configTable from '@/components/configTable'
export default {
  name: 'ConfigTable',
  components: {
    configTable
  },
  data() {
    return {
      // request: require('@/api/productApi.js').queryProductList
    }
  },
  computed: {
    column() {
      const items = [
        { type: 'selection' },
        {
          title: '用户',
          children: [{
            title: '基础信息',
            children: [
              { key: 'name', title: '名称', minWidth: '100' },
              { key: 'sex', title: '性别', minWidth: '100', dict: { key: 'SEX_STATE' }},
              { key: 'phone', title: '手机号', align: 'left', minWidth: '150' },
              { key: 'age', title: '年龄', minWidth: '100', sortable: true }
            ]
          },
          { key: 'work', title: '工作', minWidth: '100' },
          { key: 'address', title: '住址', align: 'left', minWidth: '350' }]
        },
        {
          key: 'remark',
          minWidth: '200',
          align: 'left',
          slotHeader: () => {
            return (
              <div>
              备注 &nbsp;
              <el-tooltip class='item' content='这是备注的详情' placement='top'>
                <i class='el-icon-warning-outline' />
              </el-tooltip>
              </div>
            )
          }
        },
        { key: 'type', title: '状态', dict: { key: 'APPLY_STATE' }},
        {
          key: 'oper',
          title: '操作',
          fixed: 'right',
          width: '250',
          slot: (scope) => {
            return (
              <div>
                <el-button plain size='mini' onClick={() => { console.log('详情') }}>详情</el-button>
                <el-button plain size='mini' onClick={() => { console.log('禁用') }}>禁用</el-button>
              </div>
            )
          }
        }
      ]
      return items
    }
  },
  methods: {
    // 请求前需要的参数
    beforeRequest() {
      return { id: 1, type: 2 }
    },
    // 请求数据
    request() {
      return new Promise(resolve => {
        setTimeout(() => {
          const res = {
            success: true,
            totalCount: 20,
            data: [
              { name: '张三', age: '20', sex: '1', phone: '13511111111', work: '学生', address: '福建省厦门市海沧区海沧街道新大街29号', remark: '备注信息1', type: '1' },
              { name: '李四', age: '24', sex: '2', phone: '13522222222', work: '服务员', address: '福建省厦门市思明区图强路1号', remark: '备注信息2', type: '2' },
              { name: '王五', age: '28', sex: '1', phone: '13533333333', work: '程序员', address: '福建省厦门市湖里区南山西路551号', remark: '备注信息3', type: '3' },
              { name: '赵六', age: '32', sex: '2', phone: '13544444444', work: '老师', address: '福建省厦门市集美区集美新城诚毅大街552号', remark: '备注信息4', type: '4' },
              { name: '张三', age: '20', sex: '1', phone: '13511111111', work: '学生', address: '福建省厦门市海沧区海沧街道新大街29号', remark: '备注信息1', type: '1' },
              { name: '李四', age: '24', sex: '2', phone: '13522222222', work: '服务员', address: '福建省厦门市思明区图强路1号', remark: '备注信息2', type: '2' },
              { name: '王五', age: '28', sex: '1', phone: '13533333333', work: '程序员', address: '福建省厦门市湖里区南山西路551号', remark: '备注信息3', type: '3' },
              { name: '赵六', age: '32', sex: '2', phone: '13544444444', work: '老师', address: '福建省厦门市集美区集美新城诚毅大街552号', remark: '备注信息4', type: '4' },
              { name: '张三', age: '20', sex: '1', phone: '13511111111', work: '学生', address: '福建省厦门市海沧区海沧街道新大街29号', remark: '备注信息1', type: '1' },
              { name: '李四', age: '24', sex: '2', phone: '13522222222', work: '服务员', address: '福建省厦门市思明区图强路1号', remark: '备注信息2', type: '2' },
              { name: '王五', age: '28', sex: '1', phone: '13533333333', work: '程序员', address: '福建省厦门市湖里区南山西路551号', remark: '备注信息3', type: '3' },
              { name: '赵六', age: '32', sex: '2', phone: '13544444444', work: '老师', address: '福建省厦门市集美区集美新城诚毅大街552号', remark: '备注信息4', type: '4' }
            ]
          }
          return resolve(res)
        }, 2000)
      })
    },
    // 请求完成后需要处理的事件
    afterRequest(data) {
      console.log('data', data)
    }
  }
}
</script>
